<template>
  <div>
    <template v-for="menu in list">
      <a-sub-menu :key="menu.id"
        v-if="menu.children && menu.children.length > 0 && menu.children.some(item => item.displayStatus != 2)">
        <template #title>{{ menu.label }}</template>
        <template #icon v-if="menu.icon">
          <i class="iconfont" :class="menu.icon"></i>
        </template>
        <menu-tree :list="menu.children"></menu-tree>
      </a-sub-menu>
      <a-menu-item :key="menu.id" v-else-if="menu.displayStatus != 2" @click="navTo(menu)">
        <template #icon v-if="menu.icon">
          <i class="iconfont" :class="menu.icon"></i>
        </template>
        {{ menu.label }}
      </a-menu-item>
    </template>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";

const props = defineProps(['list']);
const router = useRouter();

// 跳转相应菜单页
const navTo = menu => {
  router.push(menu.path);
}
</script>
<style></style>
<style lang="less" scoped>
::v-deep {
  .ant-menu-item {
    width: 100% !important;
    margin-inline: 0 !important;
    margin-block: 0 !important;
    border-radius: 0 !important;
    color: #61748e;
    height: 60px;

    &.ant-menu-item-selected {
      background: #d1e6ff !important;
      font-weight: bold !important;
      color: #4096ff !important;
    }

    &:hover {
      background: #d1e6ff !important;
      color: #4096ff !important;
    }
  }
}

i.iconfont {
  font-size: 20px;
}
</style>
